<template>
	<view class="statement">
		<view class="statement-engineer">
			维修工程师：{{engineer}}-{{phone}}
		</view>
		<view class="title">
			<text>工单信息</text>
		</view>
		<view class="card-detail">
			<view class="ful-detail">
				<view class="detail-left">
					工单号
				</view>
				<view class="detail-right">
					{{order_detail.workID}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					客户名称
				</view>
				<view class="detail-right">
					{{order_detail.hospital ? order_detail.hospital.name : '暂无'}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					设备名称
				</view>
				<view class="detail-right">
					{{order_detail.equipment ? order_detail.equipment.name : '暂无'}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					型号
				</view>
				<view class="detail-right">
					{{order_detail.equipment ? order_detail.equipment.marking : '暂无'}}
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					软件版本
				</view>
				<view class="detail-right">
					{{order_detail.equipment ? order_detail.equipment.software_version : '暂无'}}
				</view>
			</view>

			<view class="ful-detail">
				<view class="detail-left">
					客户报修时间
				</view>
				<view class="detail-right" @click="choiceTime">
					{{custom_time || '请选择报修时间'}}
				</view>
			</view>
		</view>
		<view class="title">
			<text>客户报修内容</text>
		</view>
		<view class="enclosure">
			<view class="enclosure_tro">
				<textarea v-model="content" placeholder-style="font-size: 28rpx;color: #434343;" placeholder="请输入..."
					style="width:100%" maxlength="140" />
			</view>
			<block v-if="order_detail.multiMedia">
				<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3" multiple
					:maxCount="10" :previewFullImage="true"></u-upload>
				<!-- <u-button type="primary" text="上传图片" @tap="chooseImage"></u-button>
				<view class="upimg">
					<view class="upimg-btn" v-for="(item,index) in images_list" :key="index">
						<image @tap="previewImage(index,1)" :src="item" mode="" style="width: 100%;height: 100%;">
						</image>
						<view class="del_img" @tap="delImg(index,1)">
							<image src="../../static/del.png" mode=""></image>
						</view>
					</view>
				</view> -->

				<!-- <view class="enclosure_img" v-for="(item,index) in order_detail.multiMedia.imgs" :key="index">
					<image :src="item" />
				</view> -->
			</block>
		</view>
		<view class="title">
			<text>服务信息</text>
		</view>
		<view class="card-detail">
			<view class="ful-detail" @click="choiceType(1)">
				<view class="detail-left">
					设备合同状态
				</view>
				<view class="detail-right" style="flex:1">
					{{contract_default}}
				</view>
				<view class="arrow">
				</view>
			</view>
			<view class="ful-detail" @click="choiceType(2)">
				<view class="detail-left">
					服务类型
				</view>
				<view class="detail-right" style="flex:1">
					{{service_default}}
				</view>
				<view class="arrow">
				</view>
			</view>
			<view class="ful-detail">
				<view class="detail-left">
					工程师到达时间
				</view>
				<view class="detail-right">
					<xp-picker @input="confirm">{{
						arrive_time
					}}</xp-picker>
				</view>
			</view>
		</view>
		<view class="title">
			<text>维修结果及建议</text>
		</view>
		<view class="proposal">
			<textarea v-model="ending" placeholder-style="font-size: 28rpx;color: #434343;" placeholder="请输入..."
				maxlength="140" />
		</view>
		<view class="submit" @click="submit">
			提交申请接单
		</view>
		<u-datetime-picker ref="datetimePicker" :show="showDate" v-model="dateValue" mode="datetime"
			:formatter="formatter" close-on-click-overlay @confirm="confirmDate" @close="closeDate"
			@cancel="closeDate" />
		<!-- :min-date="new Date().getTime()" -->
	</view>
</template>

<script>
	import baseUrl from '@/request/baseUrl.js'
	export default {
		data() {
			return {
				service_type: null, //服务类型:0=维修,1=保养,2=安装
				contract_status: null, //	合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同
				contract_default: '请选择',
				service_default: '请选择',
				contract_status_data: ['技术保合同', '无合同', '标准白金合同', '单次合同'],
				service_type_data: ['维修', '保养'],
				warranty_id: null, //工单id 
				service_id: null, //维修id
				order_detail: {}, //订单详情
				custom_time: '', //工程师报修时间
				arrive_time: '请选择时间', //工程师到达时间
				ending: '', //维修结果及建议
				engineer: '',
				phone: '',
				content: '',
				showDate: false, // 显示日期选择器
				dateValue: Number(new Date()), // 日期选择器默认值
				images_list: [],
				fileList:[]
			}
		},

		onLoad(e) {
			/*  warranty_id 工单id    service_id维修id
			 */
			this.warranty_id = e.warranty_id
			this.service_id = e.service_id
			this.getDetail()
			this.getUser()
		},
		onReady() {
			// 微信小程序需要用此写法
			this.$refs.datetimePicker.setFormatter(this.formatter)
		},
		methods: {
			/* 服务信息选择  
			id
			1   设备合同选择
			2  服务类型选择
			
			*/
			choiceType(id) {
				switch (id) {
					case 1:
						uni.showActionSheet({
							itemList: this.contract_status_data,
							success: res => {
								this.contract_default = this.contract_status_data[res.tapIndex] || ''
								this.contract_status = res.tapIndex
							},
							fail: res => {
								console.log(res.errMsg);
							}
						});
						break;
					case 2:
						uni.showActionSheet({
							itemList: this.service_type_data,
							success: res => {
								this.service_default = this.service_type_data[res.tapIndex] || ''
								this.service_type = res.tapIndex
							},
							fail: res => {
								console.log(res.errMsg);
							}
						});
						break;
				}
			},
			/* 判断是否为视频文件 */
			judgmentFile(picUrl) {
				let filename = picUrl; //文件路径地址
				let index1 = filename.lastIndexOf(".");
				let index2 = filename.length;
				let postf = filename.substring(index1, index2); //获取文bai件后缀名duzhi
				//判断文件后缀名是否等于视频文件的后缀名
				if (postf === ".avi" || postf === ".mp4" || postf === ".rmvb") {
					return true
				} else {
					return false
				}
			},
			/* 获取工单详情 */
			getDetail() {
				this.$https.post('/warranty/details', {
					warranty_id: this.warranty_id
				}).then(res => {
					this.order_detail = res.data
					this.order_detail.multiMedia = {
						imgs: [],
						video: ''
					}
					if (this.order_detail.images) { //存在照片或视频
						let images = typeof this.order_detail.images === 'string' ? this.order_detail.images.split(
							',') : this.order_detail.images;
						images.forEach(item3 => {
							if (this.judgmentFile(item3)) {
								this.order_detail.multiMedia.video = item3
							} else {
								this.order_detail.multiMedia.imgs.push(item3)
							}
						})
					}
				})
			},
			/*图片预览 */
			previewImage: function(index) {
				//uniapp预览轮播图
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.images_list //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			deletePic(e){
				this.fileList.splice(e.index, 1)
				this.images_list.splice(e.index, 1)
			},
			afterRead(e){
				let arr =[]
				this.fileList.push({
					url:e.file[0].url
				})
				arr[0]=e.file[0].url
				const token = uni.getStorageSync('userInfo').token
				arr.forEach(item => {
					uni.uploadFile({
						url: `${baseUrl}/common/upload`, //仅为示例，非真实的接口地址
						filePath: item,
						name: 'file',
						formData: {
							token: token // 上传附带参数
						},
						success: (res1) => {
							let img_data = JSON.parse(res1.data)
							if (img_data.code == 0) {
								uni.showToast({
									title: img_data.msg,
									duration: 1500,
									icon: 'error'
								})
							} else {
								var img = img_data.data.fullurl
							}
				
							this.images_list.push(img)
							console.log('-',this.images_list)
						},
						fail: res3 => {
							uni.showToast({
								title: '上传失败',
								duration: 1500,
								icon: 'error'
							})
						}
					});
				})
			},
			chooseImage() {
				const token = uni.getStorageSync('userInfo').token
				let _this = this;
				// 此方法为微信小程序自带api 详情访问https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html
				uni.chooseImage({
					sourceType: ["album", "camera"],
					count: 8,
					success: (res) => {
						const img_length = res.tempFiles.length + this.images_list.length
						if (img_length > 7) {
							uni.showToast({
								title: '最多上传7张图片',
								duration: 1500,
								icon: 'none'
							})
						} else {
							console.log(res.tempFilePaths,'-')
							res.tempFilePaths.forEach(item => {
								uni.uploadFile({
									url: `${baseUrl}/common/upload`, //仅为示例，非真实的接口地址
									filePath: item,
									name: 'file',
									formData: {
										token: token // 上传附带参数
									},
									success: (res1) => {
										let img_data = JSON.parse(res1.data)
										if (img_data.code == 0) {
											uni.showToast({
												title: img_data.msg,
												duration: 1500,
												icon: 'error'
											})
										} else {
											var img = img_data.data.fullurl
										}

										this.images_list.push(img)
										console.log('-',this.images_list)
									},
									fail: res3 => {
										uni.showToast({
											title: '上传失败',
											duration: 1500,
											icon: 'error'
										})
									}
								});
							})



							//此处会返回图片暂存路径和文件大小
							/* let imgs = res.tempFiles.map(item => {
								return item.path
							})
							this.imgs_list = [...imgs, ...this.imgs_list] */
						}

					},
					fail: res => {
						uni.showToast({
							title: '图片上传失败，请重试！',
							icon: 'none',
							duration: 1500
						})
					}
				})
			},
			/* 获取当前 工程师名称 */

			getUser() {
				this.$https.post('/user/getUser').then(res => {
					this.engineer = res.data.user.nickname;
					this.phone = res.data.user.mobile
				})
			},
			/* 工程师到达时间 */
			confirm(e) {
				this.arrive_time = e
			},
			// 打开日期选择器
			choiceTime() {
				this.showDate = true;
			},
			// 选择日期
			confirmDate(e) {
				this.showDate = false;
				let date = new Date(e.value);
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				month = month < 10 ? '0' + month : month;
				let day = date.getDate();
				day = day < 10 ? '0' + day : day;
				let hour = date.getHours();
				hour = hour < 10 ? '0' + hour : hour;
				let minute = date.getMinutes();
				minute = minute < 10 ? '0' + minute : minute;
				let second = date.getSeconds();
				second = second < 10 ? '0' + second : second;
				this.custom_time = `${year}-${month}-${day} ${hour}:${minute}:${second}`;
			},
			// 关闭日期选择器
			closeDate() {
				this.showDate = false;
			},
			// 日期选择器格式化
			formatter(type, value) {
				if (type === 'year') return `${value}年`
				if (type === 'month') return `${value}月`
				if (type === 'day') return `${value}日`
				if (type === 'hour') return `${value}时`
				if (type === 'minute') return `${value}分`
				if (type === 'second') return `${value}秒`
				return value
			},
			/* 提交 */
			submit() {
				console.log(this.images_list.join(','))
				if (this.arrive_time != '请选择时间') {
					this.$https.post('/warranty/statement', {
						warranty_id: this.warranty_id, //工单id
						service_id: this.service_id, //维修id	
						contract_status: this.contract_status, //	合同状态:0=技术保合同,1=无合同,2=标准:白金合同,3=单次合同
						service_type: this.service_type, //服务类型:0=维修,1=保养,2=安装
						present_time: this.arrive_time, //到场时间
						custom_time: this.custom_time, //报修时间
						ending: this.ending, //维修结果及建议
						content: this.content, //报修内容
						images: this.images_list.join(',')
					}).then(res => {
						uni.showToast({
							title: res.msg,
							duration: 1500,
							icon: 'success'
						})
						setTimeout(() => {
							uni.navigateBack({
								delta: res
							})
						}, 1500)
					})
				} else {
					uni.showToast({
						icon: 'none',
						title: "请选择工程师到达时间！",
						duration: 1500
					})
				}

			}
		}
	}
</script>

<style lang="scss" scoped>
	.upimg {
		display: flex;
		margin-top: 40rpx;
		justify-content: flex-start;
		flex-wrap: wrap;
		text-decoration: none;

		.del_img {
			position: absolute;
			top: -16rpx;
			right: -16rpx;
			width: 32rpx;
			height: 32rpx;
			z-index: 999;
			background-color: #FFFFFF;
			border-radius: 50%;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.upimg-btn {
			/* width: 30%;
				height: 200rpx; */
			width: 128rpx;
			height: 128rpx;
			background-color: #f6f7fb;
			margin-right: 58rpx;
			position: relative;
			margin-bottom: 20rpx;

			image {
				z-index: -99;
				border-radius: 10rpx;
				overflow: hidden;
			}

		}

		.upimg-btn:nth-child(4n) {
			margin-right: 0rpx;
		}
	}

	.upimg::after {
		// 使用伪类元素占据单位，不影响页面
		content: "";
		height: 0;
		width: 128rpx;
	}

	.submit {
		margin: 75rpx auto 50rpx;
		width: 622rpx;
		height: 80rpx;
		background: #257EFA;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 80rpx;
		letter-spacing: 8rpx;
		text-align: center;
	}

	.statement {
		background-color: #f7f8fb;
	}

	.statement-engineer {
		padding: 24rpx 32rpx;
		background: #FFEFE6;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #FF6619;
	}

	.title {
		padding: 16rpx 32rpx;
		background-color: #f7f8fb;
		font-size: 24rpx;
		font-family: PingFang SC-Regular, PingFang SC;
		font-weight: 400;
		color: #888888;
	}

	.card-detail {
		background-color: #FFFFFF;

		.ful-detail {
			padding: 24rpx 32rpx;
			display: flex;
			position: relative;

			.arrow {
				position: absolute;
				width: 14rpx;
				height: 14rpx;
				border-right: 3rpx solid #BBBBBB;
				border-bottom: 3rpx solid #BBBBBB;
				right: 32rpx;
				transform: rotate(-45deg);
			}

			.detail-left {
				width: 200rpx;
				font-size: 28rpx;
				font-family: PingFang SC-Regular, PingFang SC;
				font-weight: 400;
				color: #888888;
			}


			.detail-right {
				font-size: 28rpx;
				font-family: PingFang SC-Medium, PingFang SC;
				font-weight: 500;
				color: #434343;
			}
		}
	}

	.enclosure {
		background-color: #FFFFFF;
		padding: 22rpx 32rpx;

		.enclosure_tro {
			font-size: 24rpx;
			color: #000;
		}

		.enclosure_img {
			display: inline-block;
			border-radius: 8rpx;
			overflow: hidden;

			image {
				width: 160rpx;
				height: 160rpx;
				background: #F5F6F8;
				margin: -20rpx 10rpx 0 0;
			}
		}
	}

	.proposal {
		padding: 22rpx 32rpx;
		background-color: #FFFFFF;
		height: 200rpx;

		textarea {
			height: 100%;
			width: 100%;
		}
	}

	/* 设置input框提示内容的样式 */
	input::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	input::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	input:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	input:-ms-input-placeholder {
		color: #434343;
	}

	/* 设置textarea框提示内容的样式 */
	textarea::-webkit-input-placeholder {
		color: #434343;
	}

	/*webkit 内核浏览器*/
	textarea::-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 19+*/
	textarea:-moz-placeholder {
		color: #434343;
	}

	/*Mozilla Firefox 4 to 18*/
	textarea:-ms-input-placeholder {
		color: #434343;
	}

	/deep/ .xp-picker-mask {
		z-index: 222;
	}
</style>